<template>
<view>
<!--<import src="../../../utils/regions/regions.wxml"></import>-->

<view class="container">
    <form class="address" @submit="submitAddress">
        <view class="item">
            <view class="item-name">收货人:</view>
            <input class="item-input" name="consignee" placeholder-class="placeholder" placeholder="请填写收货人姓名" :value="address.consignee"></input>
        </view>
        <view class="item">
            <view class="item-name">手机号码:</view>
            <input class="item-input" name="mobile" placeholder-class="placeholder" placeholder="请填写收货人手机号" :value="address.mobile"></input>
        </view>
        <view class="item" data-id="0" @tap="openRegionsModal">
            <view class="item-name">所在地区:</view>
            <view v-if="address.province_name" class="item-input">{{address.province_name}} {{address.city_name}} {{address.district_name}} {{address.twon_name}}</view>
            <view v-else class="item-input">请选择所在区域</view>
            <view class="item-img">
                <image class="arrow" src="/static/images/icon-arrowdown.png"></image>
            </view>
        </view>
         <!-- <view class="item">
            <view class="item-name">邮政编码:</view>
            <input class="item-input" placeholder-class="placeholder" name="zipcode" placeholder='请填写正确的邮政编码' value="{{address.zipcode}}"/>
        </view> -->
        <view class="item">
            <view class="item-name">详细地址:</view>
            <input class="item-input" placeholder-class="placeholder" name="address" placeholder="请填写收货地址、门牌号" :value="address.address"></input>
        </view>
        <view class="item">
            <view class="item-name">设为默认地址</view>
            <switch type="switch" class="item-switch" color="#ff6a00" name="is_default" :checked="address.is_default==1?true:false"></switch>
        </view>
        <view class="address-btns">
            <button class="delete-btn" @tap="deleteAddress">删除地址</button>
            <button class="submit-btn" form-type="submit">提交地址</button>
        </view>
    </form>
</view>

<!-- 选择地址弹框  -->
<block data-type="template" data-is="regions" data-attr="regions">
    <!-- 选择地址弹框  -->
    <view :hidden="!regions.showRegionsModal">
        <view class="cover-layer" @tap="closeRegionsModal"></view>
        <view class="regions">
            <view v-for="(item, index) in regions.regions" :key="index" class="region" :data-id="item.id" :data-name="item.name" @tap="openRegionsModal">{{item.name}}</view>
        </view>
    </view>
</block>
</view>
</template>

<script>
var app = getApp();
var setting = app.globalData.setting;
var request = app.globalData.request;
import Regions from "../../../utils/regions/Regions";

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      address: {},
      //收货地址信息
      disabled: false,
      user: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var that = this;
    that.setData({
      address: options
    });
    app.globalData.getUserInfo(function (userInfo) {
      that.setData({
        user: userInfo
      });
    });
    that.initRegions();
  },
  methods: {
    /** 初始化区域弹框相关 */
    initRegions: function () {
      var that = this;
      new Regions(this, 'regions', {
        endAreaLevelCall: function (parentId, regionName, address) {
          Object.assign(that.address, address);
          that.setData({
            'address.province_name': that.address.province_name,
            'address.city_name': that.address.city_name,
            'address.district_name': that.address.district_name,
            'address.twon_name': that.address.twon_name
          });
        }
      });
    },
    submitAddress: function (e) {
      var that = this;
      that.setData({
        disabled: true
      });
      var address = that.address;
      Object.assign(address, e.detail.value);
      address.is_default = Number(address.is_default);

      if (!app.globalData.validatemobile(this.address.mobile)) {
        return;
      }

      request.post('/api/user/addAddress', {
        data: address,
        failRollback: false,
        success: function (res) {
          if (res.data.status == 1) {
            if (e.detail.value.is_default == 1 && address.address_id) {
              uni.setStorageSync('cart:cart2:address', address);
            }

            app.globalData.showSuccess(res.data.msg, function () {
              uni.navigateBack();
            });
          } else {
            app.globalData.confirmBox(res.data.msg);
            that.setData({
              disabled: true
            });
          }
        }
      });
    },

    /** 删除地址 */
    deleteAddress: function () {
      var addressId = this.address.address_id;

      if (!addressId) {
        return;
      }

      uni.showModal({
        title: '确定删除？',
        success: function (res) {
          res.confirm && request.post('/api/user/del_address', {
            data: {
              id: addressId
            },
            success: function (res) {
              app.globalData.showSuccess('删除成功', function () {
                uni.navigateBack();
              }, 500);
            }
          });
        }
      });
    }
  }
};
</script>
<style>
page{
   
}
.address{
    width: 710rpx;
    margin: 0rpx auto; 
    margin-top: 20rpx;
    background: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
}
.item{
    float: left;
    padding: 0 30rpx; 
    width: 100%;
    box-sizing: border-box;
    font-size: 26rpx;
    border-bottom: 1rpx solid #f3f3f3;
    line-height: 100rpx;
    height: 100rpx;
    position: relative;
}
.item-name{
    float: left;
    color: #999;
}
.placeholder{
    color: #999;
}
input{
    color: #666;
}
.item-input{
    float: left;
    height: 100rpx;
    width: 470rpx;
    margin-left: 20rpx;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #999;
}
.item-switch{
    float: right;
}
.arrow{
    position: absolute;
    right: 30rpx;
    width: 32rpx;
    height: 32rpx;
    padding-top: 30rpx;
}

.address-btns{
    position: absolute;
    bottom: 80rpx;
    float: left;
    width: 90%;
    padding: 10rpx 0;
}
.delete-btn{
    float: left;
    width: 40%;
    margin:0 10% 0 5%;
     border-radius: 10rpx; 
    color:#fff;
    background-color: #999;
    border:1px solid #f3f3f3;
}
.submit-btn{
    float: left;
    width: 40%;
    background-color: #ff6a00;
    color: white;
    border-radius: 10rpx;
}
/* 区域选择弹框 */
@import "../../../utils/regions/regions.css"; 
</style>